<script setup lang="ts">
import {useLogin} from "../../hooks/useLogin";
import {ElMessage} from "element-plus";
import {mainStore} from "../../store/store.ts";

const {account, password, Login, bgImg} = useLogin()

const emit = defineEmits(['login'])

const store = mainStore()
const login = async () => {
  if (account.value === '' || password.value === '') return
  let [ret] = await Promise.all([Login()])
  if (ret.result) {
    const {setter_loginStatus} = store
    setter_loginStatus(ret.result)
    // mainStore().loginStatus = ret.result as boolean
    ElMessage.success(ret.message)
    emit('login')
  } else {
    ElMessage.error(ret.message)
  }
}
</script>

<template>
  <div>
    <div class="img-text-box">
      <el-text class="img-text-margin">Hello_</el-text>
      <el-image class="el-main-login-size" :src="bgImg"/>
    </div>
    <div class="input-text-center">
      <div class="full-text">
        <el-text>登录可享更多权益</el-text>
      </div>
      <div class="full-text">
        <el-text>提高技能水平 &nbsp;</el-text>
        <el-text class="text-red">海量资源免费使用</el-text>
      </div>
      <el-input class="el-input-margin-top" v-model="account" placeholder="账户"/>
      <el-input class="el-input-margin-top" v-model="password" type="password" placeholder="密码"/>
      <div class="full-text el-input-margin-top">
        <el-button class="login-btn-width" @click="login">登 录</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import "../style/Login.scss";
</style>